<template>
  <div class="white-bg ">
    <el-scrollbar class="renderEchartsEdit">
      <Repl
        theme="dark"
        :store="store"
        class="repl"
        :editor="Monaco"
        id="repl"
      />

      <div class="renderEcharts jcfend">
        <el-button type="primary" @click="savePng">下载图片</el-button>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup lang="tsx">
import { ref, reactive, getCurrentInstance, onMounted, watchEffect } from "vue";
import { useRouter, useRoute } from "vue-router";
import { Repl, useStore, useVueImportMap, File } from "@vue/repl";
import Monaco from "@vue/repl/monaco-editor";
import * as echartsData from "./workbench/module";
import { saveAs } from "file-saver";
import { tool } from "./tool";
import { toPng } from "html-to-image";
const router = useRouter();
const route = useRoute();
const replRef = ref("");
const savePng = () => {
  var node: any = document.getElementById("repl");
  const iframe = node.querySelector("iframe");
  var iframeDocument: any =
    iframe.contentDocument || iframe.contentWindow.document;
  console.log("iframeElement :>> ", iframeElement);
  // 示例：获取iframe中的元素
  var iframeElement = iframeDocument.getElementById("app");

  toPng(iframeElement).then((dataUrl) => {
    saveAs(dataUrl, `${route.params.text}.png`);
  });
};
const base = "/vue.example"
const {
  importMap: builtinImportMap,
  vueVersion,
  productionMode,
} = useVueImportMap({
  // specify the default URL to import Vue runtime from in the sandbox
  // default is the CDN link from jsdelivr.com with version matching Vue's version
  // from peerDependency
  //   "echarts": 'https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js',
    runtimeProd:  base+ "/js/runtime-dom.3.4.19.esm-browser.prod.js",
  //   runtimeDev: 'cdn link to vue.runtime.esm-browser.js',
  //   runtimeProd: 'cdn link to vue.runtime.esm-browser.prod.js',
    serverRenderer:  base+ "/js/server-renderer.3.4.19.esm-browser.js",
});

// builtinImportMap.value.imports["tool"] =
// "/tool.js";

const template = ref({
  welcomeSFC: echartsData[route.params.text],
});
const mainFile = ref("index.vue");
const files = ref({
  "src/tool.js": new File("src/tool.js", tool, false),
});
//  builtinImportMap.value.imports["echarts-liquidfill"] =
//   "https://cdn.jsdelivr.net/npm/echarts-liquidfill@3.1.0/dist/echarts-liquidfill.min.js";
// builtinImportMap.value.imports["echarts"] =
//   "https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js";

// builtinImportMap.value.imports["vue"] =
//   base+ "/js/runtime-dom.3.4.19.esm-browser.prod.js";
//   builtinImportMap.value.imports["vue/server-renderer"] =
//   base+ "/js/server-renderer.3.4.19.esm-browser.js";
 builtinImportMap.value.imports["echarts-liquidfill"] =
 base+ "/js/echarts-liquidfill.3.1.0.min.js";
builtinImportMap.value.imports["echarts"] =
  base+  "/js/echarts.5.5.0.min.js";
builtinImportMap.value.imports["echarts-gl"] =
   base+ "/js/echarts-gl.2.0.9.min.js";
const store = useStore({
  // pre-set import map
  vueVersion,
  builtinImportMap: builtinImportMap,
  template: template,
  // mainFile: mainFile,
  files,
});
//   store.setFiles(
//   {
//     'src/tool.js':tool,
//   },
// )

//   store.setFiles(
//   {
//     'src/index.html': '<h1>yo</h1>',
//     'src/main.js': 'document.body.innerHTML = "<h1>hello</h1>"',
//     'src/foo.js': 'document.body.innerHTML = "<h1>hello</h1>"',
//     'src/bar.js': 'document.body.innerHTML = "<h1>hello</h1>"',
//     'src/baz.js': 'document.body.innerHTML = "<h1>hello</h1>"',
//   },
//   'src/index.html',
// )
productionMode.value = true;
const dialogVisible = ref(true);
const state = reactive({});
onMounted(() => {
  console.log("store :>> ", store);
});
</script>

<style scoped lang="scss">
.renderEchartsEdit {
  width: 100%;
  height: calc(100vh - 114px);
  position: relative;
  .repl {
    width: 100%;
    height: 100%;
  }
  .renderEcharts {
    position: absolute;
    right: 30px;
    bottom: 20px;
  }
}
</style>
